import React, { PureComponent } from "react";
import {Redirect} from 'react-router-dom'
import { connect } from "react-redux";
import { actions } from "./store";
import { LoginlWrapper, LoginlBox, Input, Button } from "./style";

class Login extends PureComponent {
  render() {
    const { loginStatu } = this.props;
    if (!loginStatu) {
      return (
        <LoginlWrapper>
          <LoginlBox>
            <Input
              placeholder="账号"
              ref={input => {
                this.accout = input;
              }}
            ></Input>
            <Input
              placeholder="密码"
              type="password"
              ref={input => {
                this.password = input;
              }}
            ></Input>
            <Button
              onClick={() => this.props.login(this.accout, this.password)}
            >
              登录
            </Button>
          </LoginlBox>
        </LoginlWrapper>
      );
    }else{
      return <Redirect to="/"></Redirect>
    }
  }
}

const mapState = state => ({
  loginStatu: state.getIn(["login", "login"])
});

const mapDispatch = dispatch => ({
  login(accout, password) {
    dispatch(actions.login(accout.value, password.value));
  }
});

export default connect(mapState, mapDispatch)(Login);
